<!DOCTYPE html>
<html lang="en">
  <head>
    
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />



  <meta name="description" content="手机端页面下滑异步加载数据"/>




  <meta name="keywords" content="滑动异步加载," />




  <link rel="alternate" href="/atom.xml" title="imIce">




  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=2.4.x" />



<link rel="canonical" href="http://yoursite.com/2017/08/17/slideLoading/"/>


<meta name="description" content="手机端页面下滑异步加载数据  需求：手机端滑动异步加载产品数据">
<meta name="keywords" content="滑动异步加载">
<meta property="og:type" content="article">
<meta property="og:title" content="手机端页面下滑异步加载数据">
<meta property="og:url" content="http://yoursite.com/2017/08/17/slideLoading/index.html">
<meta property="og:site_name" content="imIce">
<meta property="og:description" content="手机端页面下滑异步加载数据  需求：手机端滑动异步加载产品数据">
<meta property="og:locale" content="en">
<meta property="og:updated_time" content="2017-08-17T03:20:24.205Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="手机端页面下滑异步加载数据">
<meta name="twitter:description" content="手机端页面下滑异步加载数据  需求：手机端滑动异步加载产品数据">


<link rel="stylesheet" type="text/css" href="/css/style.css?v=2.4.x" />



  <link rel="stylesheet" type="text/css" href="/lib/fancybox/jquery.fancybox.css" />





<script>
  var CONFIG = {
    search: true,
    searchPath: "/search.xml",
    fancybox: true,
    toc: true,
  }
</script>




  



    <title> 手机端页面下滑异步加载数据 · imIce </title>
  </head>

  <body><div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/." class="logo">imIce</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    
      <a href="/">
        <li class="mobile-menu-item">
          
          
            Home
          
        </li>
      </a>
    
      <a href="/archives/">
        <li class="mobile-menu-item">
          
          
            Archives
          
        </li>
      </a>
    
      <a href="/tags">
        <li class="mobile-menu-item">
          
          
            Tags
          
        </li>
      </a>
    
      <a href="/about">
        <li class="mobile-menu-item">
          
          
            About
          
        </li>
      </a>
    
  </ul>
</nav>

    <div class="container" id="mobile-panel">
      <header id="header" class="header"><div class="logo-wrapper">
  <a href="/." class="logo">imIce</a>
</div>

<nav class="site-navbar">
  
    <ul id="menu" class="menu">
      
        <li class="menu-item">
          <a class="menu-item-link" href="/">
            
            
              Home
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/archives/">
            
            
              Archives
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/tags">
            
            
              Tags
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/about">
            
            
              About
            
          </a>
        </li>
      
      
        <li class="menu-search">
          <form>
            <i class="iconfont icon-search" id="open-search"></i>
            <input type="text" class="search-input" id="search-input" />
            <i class="iconfont icon-close" id="close-search"></i>
          </form>
        </li>
      
    </ul>
  
</nav>

      </header>

      <main id="main" class="main">
        <div class="content-wrapper">
          <div id="content" class="content">
            
  
  <article class="post">
    <header class="post-header">
      <h1 class="post-title">
        
          手机端页面下滑异步加载数据
        
      </h1>

      <div class="post-meta">
        <span class="post-time">
          Aug 17, 2017
        </span>
      </div>
    </header>

    
    

    <div class="post-content">
      
        <p><strong>手机端页面下滑异步加载数据</strong></p>
<blockquote>
<p>需求：手机端滑动异步加载产品数据</p>
</blockquote>
<a id="more"></a>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//当前pageNo</span></div><div class="line"><span class="keyword">var</span> pageNo = <span class="built_in">parseInt</span>(<span class="string">'$&#123;pageNo&#125;'</span>);</div><div class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	query(<span class="string">'first'</span>);<span class="comment">//首次加载</span></div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="comment">//设置加载状态</span></div><div class="line"><span class="keyword">var</span> loading = <span class="literal">false</span>;</div><div class="line">Zepto(<span class="function"><span class="keyword">function</span>(<span class="params">$</span>)</span>&#123;</div><div class="line">	$(<span class="built_in">window</span>).scroll(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="comment">//默认滑动到底部开始</span></div><div class="line">         <span class="keyword">if</span>(($(<span class="built_in">window</span>).scrollTop() + $(<span class="built_in">window</span>).height() &gt; $(<span class="built_in">document</span>).height()<span class="number">-10</span>)</div><div class="line">                 &amp;&amp; loading )&#123;</div><div class="line">             loading=<span class="literal">false</span>;</div><div class="line">             pageNo++;</div><div class="line">             query(<span class="string">"then"</span>);</div><div class="line">         &#125;</div><div class="line">     &#125;);</div><div class="line">&#125;);</div><div class="line"></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">query</span>(<span class="params">type</span>)</span>&#123;</div><div class="line">	<span class="keyword">var</span> url = <span class="string">"$&#123;ctx&#125;/product/getJson.action?pageNo="</span>+pageNo;</div><div class="line">	$loading.show();<span class="comment">//显示加载中效果</span></div><div class="line">	$.ajax(&#123;</div><div class="line">		url:url,</div><div class="line">		success:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">			loading = <span class="literal">true</span>;<span class="comment">//标识</span></div><div class="line">			<span class="keyword">if</span>(data == <span class="literal">null</span>)&#123;</div><div class="line">				pageNo--;</div><div class="line">				$.loading.hide();</div><div class="line">				$(<span class="string">'.nomore-products'</span>).show();<span class="comment">//数据加载完成，无更多</span></div><div class="line">				loading = <span class="literal">false</span>;</div><div class="line">			&#125;<span class="keyword">else</span>&#123;</div><div class="line">				<span class="keyword">if</span>(type == <span class="string">'then'</span>)&#123;<span class="comment">//滑动加载</span></div><div class="line">					<span class="keyword">if</span>(data.length == <span class="number">0</span>)&#123;</div><div class="line">						pageNo--;</div><div class="line">						$loading.hide();</div><div class="line">						$(<span class="string">'.nomore-products'</span>).show();</div><div class="line">						loading = <span class="literal">false</span>;</div><div class="line">						<span class="keyword">return</span> <span class="string">""</span>;</div><div class="line">					&#125;</div><div class="line">				&#125;</div><div class="line">				$.each(data,<span class="function"><span class="keyword">function</span>(<span class="params">i,item</span>)</span>&#123;</div><div class="line">					<span class="comment">//获取json数据拼接html</span></div><div class="line">					$productList.append( </div><div class="line">					<span class="string">'&lt;figcaption&gt;'</span></div><div class="line">					+<span class="string">'&lt;span&gt;'</span> + item.productTitle + <span class="string">'&lt;/span&gt;'</span></div><div class="line">					+<span class="string">'&lt;span&gt;'</span> + item.productId+ <span class="string">'&lt;/span&gt;'</span></div><div class="line">					+<span class="string">'&lt;/figcaption&gt;'</span></div><div class="line">					);</div><div class="line">					$loading.hide();	</div><div class="line">				&#125;);</div><div class="line">				</div><div class="line">			&#125;		</div><div class="line">		&#125;,</div><div class="line">		error:<span class="function"><span class="keyword">function</span>(<span class="params">XMLHttpRequest,textStatus,errorThrown</span>)</span>&#123;</div><div class="line">			loading=<span class="literal">true</span>;</div><div class="line">            pageNo--;</div><div class="line">            alert(<span class="string">"数据加载出错"</span>+textStatus);</div><div class="line">		&#125;</div><div class="line">	&#125;);</div></pre></td></tr></table></figure>
<blockquote>
<p>如果首次加载不想用异步方式，可以在<code>pageNo</code>声明之后直接<code>++</code>，直接加载第二页，<br>首次可以用从后台直接返回的list数据，异步加载时再返回<code>json</code>即可</p>
</blockquote>

      
    </div>

    
      
      



      
      
  <div class="post-reward">
    <input type="checkbox" name="reward" id="reward" hidden />
    <label class="reward-button" for="reward">Reward</label>
    <div class="qr-code">
      
      
        <label class="qr-code-image" for="reward">
          <img class="image" src="/image/reward/wechat.png" title="wechat">
        </label>
      
      
        <label class="qr-code-image" for="reward">
          <img class="image" src="/image/reward/alipay.png" title="alipay">
        </label>
      
    </div>
  </div>

    

    
      <footer class="post-footer">
        
          <div class="post-tags">
            
              <a href="/tags/滑动异步加载/">滑动异步加载</a>
            
          </div>
        
        
        
  <nav class="post-nav">
    
      <a class="prev" href="/2017/09/04/CentOS_jdk1.7/">
        <i class="iconfont icon-left"></i>
        <span class="prev-text nav-default">CentOS安装配置jdk</span>
        <span class="prev-text nav-mobile">Prev</span>
      </a>
    
    
      <a class="next" href="/2017/08/17/springMVC-2/">
        <span class="next-text nav-default">springMVC学习记录（二）基于代码的servlet容器初始化</span>
        <span class="prev-text nav-mobile">Next</span>
        <i class="iconfont icon-right"></i>
      </a>
    
  </nav>

      </footer>
    

  </article>


          </div>
          
  <div class="comments" id="comments">
    
  </div>


        </div>  
      </main>

      <footer id="footer" class="footer">

  <div class="social-links">
    
      
        
          <a href="mailto:ice105ow@qq.com" class="iconfont icon-email" title="email"></a>
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
      <a href="/atom.xml" class="iconfont icon-rss" title="rss"></a>
    
  </div>


<div class="copyright">
  <span class="power-by">
    Powered by <a class="hexo-link" href="https://hexo.io/">Hexo</a>
  </span>
  
  <span class="theme-info">
    Theme - 
    <a class="theme-link" href="https://github.com/ahonn/hexo-theme-even">Even</a>
  </span>

  <span class="copyright-year">
    
    &copy; 
     
      2016 - 
    
    2017

    <span class="heart">
      <i class="iconfont icon-heart"></i>
    </span>
    <span class="author">ice</span>
  </span>
</div>
      </footer>

      <div class="back-to-top" id="back-to-top">
        <i class="iconfont icon-up"></i>
      </div>
    </div>

    
  



    
  





  
    <script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
  

  
    <script type="text/javascript" src="/lib/slideout/slideout.js"></script>
  

  
    <script type="text/javascript" src="/lib/fancybox/jquery.fancybox.pack.js"></script>
  


    <script type="text/javascript" src="/js/src/even.js?v=2.4.x"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=2.4.x"></script>

    
  <script type="text/html" id="search-result">
    <article class="post">
      <header class="post-header">
        <h1 class="post-title">
          <a href="$url$" class="post-link">
            $title$
          </a>
        </h1>
      </header>
      <div class="post-content">
        $content$
        <div class="read-more">
          <a href="$url$" class="read-more-link">
            Read more..
          </a>
        </div>
      </div>
    </article>
  </script>
  <script type="text/html" id="no-search-result">
    <div class="no-result">
      <h2>No result found!</h2>
    </div>
  </script>
  <script type="text/javascript" src="/js/src/search.js?v=2.4.x"></script>

  </body>
</html>
